/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:张谦
 */

import React, {FC, useCallback, useMemo} from "react";
import useList, {ListOperate} from "@/hooks/useList";
import {OnlineUserModel} from "@/pages/sys/onlineUser/data";
import {ProColumns} from "@ant-design/pro-table/lib/Table";
import {Button, Modal} from "antd";
import ProTableCrud, {ProTableCrudOperate} from "@/components/ProTableCrud";
import service from "@/pages/sys/onlineUser/service";
import Details from "@/pages/sys/onlineUser/components/Details";
import {ExclamationCircleOutlined} from '@ant-design/icons';
import style from "@/pages/sys/dept/index.less";
import {hasPermission} from "@/utils/utils";
import config from "@/config";
import Permission from "@/components/Permission";
import useDialog from "@/hooks/useDialog";
import {DialogOperate} from "@/global";

const {confirm} = Modal;
const checkedRender = (checked: boolean) => checked && (<i style={{color: 'green'}} className="fal fa-check"/>);

/** 系统用户模块 */
const onlineUserPage: FC = () => {
  const detailsOperate = useDialog();

  //List
  const listOperate = useList<OnlineUserModel>({
    onLoad: (params) => {
      if (!params.name) {
        params.name = '';
      }
      return service.selectList(params);
    },
  });

  const searchOptionRender = useCallback(({searchText, resetText}, {form}) => {
    return (
      <>
        <Button type="primary" htmlType="submit" onClick={() => form.submit()}>
          <i className='fal fa-search'/> {searchText}
        </Button>
      </>
    );
  }, [listOperate]);

  //表格列
  const cols = useMemo(() => getCols(listOperate, detailsOperate), []);


  const showDeleteConfirm2 = (rows: any) => {
    confirm({
      title: '系统提示',
      icon: <ExclamationCircleOutlined/>,
      content: '注：您确定要注销吗？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        service.logoff(rows.selectedRows[0].id)
        listOperate.handleReload();
      },
      onCancel() {
      },
    });
  };

  //增删改查选项
  const tableOperate: ProTableCrudOperate<OnlineUserModel> = {
    cols,
    listOperate,
    detailsOperate,
    showDetails: hasPermission(config.permission.sysOnlineUser.select),
    showOptionColumn: false,
    getToolbarItems: (_, rows) => [(hasPermission(config.permission.sysOnlineUser.logoffByAccount) ? <Button
      disabled={!rows.selectedRowKeys || rows.selectedRowKeys.length != 1}
      onClick={() => showDeleteConfirm2(rows)}><i className='fa fa-cog'/>注销</Button> : null)],
    getColumnComandItems: (_, rows) => ['details'],
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <Permission code={config.permission.sysOnlineUser.select}>
      <ProTableCrud
        headerTitle="在线用户列表"
        pagination={false}
        rowKey="id"
        operate={tableOperate}
        search={{optionRender: searchOptionRender,}}
        scroll={{x: 1000}}
      />
    </Permission>
  );
}

/** 获取表格列 */
function getCols(listOperate: ListOperate<OnlineUserModel>, detailsOperate: DialogOperate): (ProColumns<OnlineUserModel>[]) {
  return [
    {
      title: '姓名',
      dataIndex: 'name',
      hideInTable: false,
      hideInSearch: false,
      initialValue: '',
      ellipsis: true,
      sorter: false,
      width: 130,
      formItemProps: {
        'placeholder': '请输入姓名查询',
      },
      render: (_, r) => {
        return (
          <div className={style.overflow}>
            <a onClick={() => detailsOperate.show({id: r.id})}>{r.name}</a>
          </div>
        );
      },
    },
    {
      title: '账号',
      dataIndex: 'account',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: true,
      sorter: false,
      width: 100,
      formItemProps: {
        'placeholder': '请输入账号',
      },
    },
    {
      title: '登录时间',
      dataIndex: 'loginTime',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      width: 170,
      formItemProps: {
        'placeholder': '请输入登录时间',
      },
    },
    {
      title: '激活时间',
      dataIndex: 'activeTime',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      width: 170,
      formItemProps: {
        'placeholder': '请输入激活时间',
      },
    },
    {
      title: '部门',
      dataIndex: 'deptName',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      width: 170,
      formItemProps: {
        'placeholder': '请输入部门',
      },
    },
    {
      title: '登录IP',
      dataIndex: 'ip',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: true,
      sorter: false,
      width: 150,
      formItemProps: {
        'placeholder': '请输入登录IP',
      },
    },
    {
      title: '超管',
      dataIndex: 'admin',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      width: 80,
      align: 'center',
      render: (_, r) => checkedRender(r.admin),
    },
    {
      key: 'other',
      hideInTable: false,
      hideInSearch: true,
    },
  ]
}

export default onlineUserPage;
